<template>
	<view class="user-content">
		<view class="user-header">
			<image style="width: 100%;" :src="bgUrl"></image>
			<view class="user-info">
				<up-avatar size="60" :src="userInfo.avatar"></up-avatar>
				<view class="info-item">
					<view style="font-size: 15px;" class="icon-text">
						{{userInfo.userName}}
						<view class="icon-text user-phone">
							<!-- <uni-icons color="white" type="phone" size="18"></uni-icons> -->
							<up-text size="13" call  color="#764114" mode="phone" :text="userInfo.phonenumber"></up-text>
						</view>
						<uni-icons style="margin-left: 10rpx;" color="white" type="compose" size="20"></uni-icons>
					</view>
					<view>
						{{userInfo.companyName}}
					</view>
				</view>
			</view>
		</view>
		<view class="user-body">
			<view v-if="menuType == 1" class="user-menu-list">
				<view class="menu-item" v-for="(menu,index) in menuList" :key="index">
					<view style="margin-right: 10rpx;" :class="['iconfont',menu.icon]"></view>
					<view class="menu-item-name">{{menu.name}}</view>			
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view v-else class="user-menu-list2">
				<view class="menu-item2" v-for="(menu,index) in menuList" :key="index">
					<view class="item-icon" :class="['iconfont',menu.icon1]"></view>
					<view class="menu-item-name">{{menu.name}}</view>		
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
let bgUrl = ref('http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/other/202502/d93f6ff5d98f403f8fbe1d1d3faf13f3.jpg?Expires=2611399524&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=tpexKEtSA2JI%2Bk0zMrxt6BJGxII%3D')
const userInfo = ref({
	userId:1,
	userName:'Do good',
	nickName:'测试',
	phonenumber:'13710587016',
	companyName:'广州卡孚斯科技有限公司',
	avatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132'
})
const menuType = ref(2);
const menuList = ref([
	{name:'订单',icon:'icon-dingdan',icon1:'icon-dingdan1'},
	{name:'购物车',icon:'icon-gouwuche',icon1:'icon-gouwuche1'},
	{name:'我的收藏',icon:'icon-shoucang1',icon1:'icon-shoucang'},
	{name:'地址',icon:'icon-dizhi',icon1:'icon-dizhi1'},
	{name:'投诉建议',icon:'icon-tousujianyi',icon1:'icon-tousujianyi1'},
	{name:'设置',icon:'icon-shezhi',icon1:'icon-shezhi1'},
]);
</script>
<style lang="scss" scoped>
	.user-header{
		position: relative;
		// height: 480rpx;
		width: 100%;
		.user-info{
			position: absolute;
			left: 50rpx;
			bottom: 60rpx;
			width: calc(100% - 100rpx);
			display: flex;
			align-items: center;
			.info-item{
				color: white;
				padding-left: 20rpx;
				flex: 1;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	
	.user-phone{
		color: #764114;
		background-image: linear-gradient(to right , #fae7c7, #f0c590);
		margin-left: 10rpx;
		border-radius: 22rpx;
		padding: 0 6rpx;
	}
	.user-body{
		// margin-top: 20rpx;
		.user-menu-list{
			.menu-item{
				background-color: white;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				.menu-item-name{
					flex:1;
				}
			}
		}
		.user-menu-list2{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			.menu-item2{
				// min-height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin: 30rpx;
				.item-icon{
					text-align: center;
					font-size: 40px;
				}
				.menu-item-name{
					text-align: center;
					margin-top: 6rpx;
				}
			}
		}
	}
</style>